<template>
  <div class="lampdataform">
    <div class="form-wrap">
      <el-card style="margin: 6px;height:99%">
        <div class="menu-wrap">
          <el-input
            v-model="deptName"
            :placeholder="$t('device.device-linkage.188958-0')"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px; margin-right: 10px"
          />
          <el-tree
            :default-expanded-keys="[100]"
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            highlight-current
            @node-click="handleNodeClick"
          />
        </div>
      </el-card>
    </div>
    <!--灯控器主体信息-->
    <div class="modal_body">
      <div class="lamp">
        <div class="topbar">
          <div class="search">
            <form class="ant-form">
              <div class="inputBody">
                <div class="inputHead">
                  <span class="headText"
                    >{{
                      $t(
                        "title.tunnellightingsystem_systemmanagement_title_devicename"
                      )
                    }}:</span
                  >
                  <el-input
                    size="mini"
                    :placeholder="
                      $t(
                        'title.tunnellightingsystem_systemmanagement_title_devicename'
                      )
                    "
                    v-model="search"
                    clearable
                  ></el-input>
                </div>
                <div class="inputHead">
                  <span class="headText"
                    >{{
                      $t(
                        "title.tunnellightingsystem_systemmanagement_title_equipmentnumber"
                      )
                    }}:</span
                  >
                  <el-input
                    size="mini"
                    :placeholder="
                      $t(
                        'title.tunnellightingsystem_systemmanagement_title_equipmentnumber'
                      )
                    "
                    v-model="search2"
                    clearable
                  ></el-input>
                </div>
              </div>
              <div class="el-button-amplify">
                <el-button
                  size="mini"
                  type="info"
                  icon="el-icon-search"
                  circle
                  @click="refreshlampdata(1)"
                ></el-button>
              </div>
            </form>
          </div>
          <div style="float: right">
            <div class="ant-btn-viewmore">
              <!--放大页面-->
              <el-button
                size="mini"
                type="info"
                icon="el-icon-copy-document"
                circle
                @click="lampmaxtoparent"
              ></el-button>
            </div>
          </div>
        </div>
      </div>

      <!--灯控器设备列表-->
      <div class="lamptable">
        <el-table
          ref="multipleTable"
          height="560"
          :border="false"
          size="small"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :cell-class-name="addClass"
          :header-cell-style="tableHeaderStyle"
          @row-dblclick="openlampDetails"
          class="subtable"
        >
          <el-table-column type="selection" width="30"></el-table-column>
          <el-table-column
            type="index"
            :label="$t('table.roadlampsystem_frontpage_table_index')"
            width="50"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="deviceName"
            :label="$t('table.roadlampsystem_frontpage_table_name')"
            width="180"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="serialNumber"
            :label="$t('table.roadlampsystem_frontpage_table_poleid')"
            sortable
            width="135"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="transport"
            :label="
              $t(
                'title.tunnellightingsystem_systemmanagement_title_networkingmethod'
              )
            "
            width="90"
            show-overflow-tooltip
          ></el-table-column>
          <!-- <el-table-column prop="groupid" :label="$t('table.roadlampsystem_frontpage_table_area')" sortable width="80" show-overflow-tooltip></el-table-column> -->
          <!-- <el-table-column prop="projectname" :label="$t('table.projectname')" show-overflow-tooltip></el-table-column> -->
          <el-table-column
            prop="status"
            :label="$t('table.alarm')"
            width="90"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <img
                style="width: 16px; height: 16px; position: absolute; top: 5px"
                :src="scope.row.alarm"
                @click="getMore(scope.row)"
              />
            </template>
          </el-table-column>
          <!-- <el-table-column prop="controlstatename" :label="$t('table.control')" width="60" show-overflow-tooltip></el-table-column> -->
          <el-table-column
            prop="onlinename"
            :label="$t('table.status')"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="position"
            :label="$t('table.location')"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <img
                style="height: 16px; width: 16px; position: absolute; top: 4px"
                src="@/assets/image/loation.png"
                draggable="true"
                @click="checkDetail(scope.row)"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!--分页功能-->
      <div class="modal_bottom">
        <el-pagination
          :small="true"
          :background="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="queryParams.pageNum"
          layout="total,sizes, prev, pager, next, jumper"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="queryParams.pageSize"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { listDeviceShort } from "@/api/iot/device";
import { deptsTreeSelect } from "@/api/iot/device";
export default {
  name: "lamp",
  props: {
    productId: {
      type: Number,
    },
  },
  data() {
    return {
      msg: "lampclose",
      tableData: [],
      currentPage: 1,
      perpage: 20,
      total: 0,
      lampmsg: [],

      search: "",
      search2: "",

      imglist: [
        {
          imgurl: require("@/assets/image/redlight.png"),
        },
        {
          imgurl: require("@/assets/image/redlight1.png"),
        },
      ],
      deptName: "",
      deptOptions: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        deptId: undefined,
        showChild: true,
        status: "",
        serialNumber: "",
        productId: this.productId,
      },
    };
  },
  mounted() {
    this.getDeptTree();
    this.$nextTick(() => {
      this.getDeviceList();
    });
  },
  watch: {
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    doControlRemove(data) {
      var that = this;
      var msg, reply;
      msg = ControlRemove(data);
      depot.post({
        url: msg.url,
        data: msg.data,
        cb: function (res) {
          reply = ReplyAnalyzing(res);
          if (reply.successed == true) {
            if (sessionStorage.lang == "zh-cn") {
              that.$message({
                type: "success",
                message: "删除成功!",
              });
              that.refreshlampdata();
            } else {
              that.$message({
                type: "success",
                message: "Deletion succeeded!",
              });
              that.refreshlampdata();
            }
          } else {
            that.$message({
              type: "error",
              message: reply.message,
            });
          }
        },
      });
    },
    filterNode(value, data, node) {
      if (data.label) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      } else if (node.parent.label.indexOf(value) !== -1) {
        return true;
      }
    },
    handleNodeClick(data) {
      if (data.groupId) {
        this.queryParams.groupId = data.groupId;
      } else {
        this.queryParams.groupId = null;
      }
      if (data.id == 0) {
        return;
      }
      this.queryParams.deptId = data.id;
      this.getDeviceList();
    },
    /** 查询机构下拉树结构 */
    getDeptTree() {
      deptsTreeSelect().then((response) => {
        this.deptOptions = this.replaceGroupChildrenWithChildren(response.data);
        this.queryParams.deptId = response.data[0].id;
      });
    },
    replaceGroupChildrenWithChildren(treeData) {
      return treeData.map((newNode) => {
        if (newNode.groupChildren && newNode.groupChildren.length > 0) {
          for (let i in newNode.groupChildren) {
            newNode.groupChildren[i].label = newNode.groupChildren[i].groupName;
          }
          let obj = {
            label: this.$t("device.device-edit.148398-83"),
            id: 0,
            children: newNode.groupChildren,
          };
          if (newNode.children && newNode.children.length > 0) {
            newNode.children.unshift(obj);
          } else {
            newNode.children = [obj];
          }
        }

        // 如果节点有 children，递归处理子节点
        if (newNode.children && newNode.children.length > 0) {
          this.replaceGroupChildrenWithChildren(newNode.children);
        }

        return newNode;
      });
    },
    //设置表头行的样式
    tableHeaderStyle({ row, column, rowIndex, columnIndex }) {
      return "background-color: #ffffff;color: #000000;font-size:14px";
    },
    openlampDetails(row) {
      this.tableData.forEach((item) => {
        if (item.comid == row.comid) {
          this.$emit("lampmange", item);
        }
      });
      //this.$emit("rtumange", row.comid);
    },
    handleCellClick(row) {
      console.log(row);
    },
    getDeviceList() {
      let that = this;
      listDeviceShort(this.queryParams).then((response) => {
        this.tableData = response.rows;
        for (let i in response.rows) {
          that.tableData[i].groupid = "--";
          if (
            response.rows[i].alertCount &&
            response.rows[i].alertCount.unprocessedCount > 0
          ) {
            that.tableData[i].alarm = that.imglist[0].imgurl;
          } else {
            that.tableData[i].alarm = that.imglist[1].imgurl;
          }

          if (response.rows[i].status === 1) {
            that.tableData[i].onlinename = that.$t("menu.notactive");
          } else if (response.rows[i].status === 2) {
            that.tableData[i].onlinename = that.$t("menu.interdict");
          } else if (response.rows[i].status === 3) {
            that.tableData[i].onlinename = that.$t("menu.online");
          } else {
            that.tableData[i].onlinename = that.$t("menu.offline");
          }
          // if (response.rows[i].thingsModels) {
          //     const Model = response.rows[i].thingsModels.find((model) => model.id === 'DBA');
          //     if (Model) {
          //         const GroupParam = Model.datatype.params.find((param) => param.id === 'DBA_Group');
          //         if (GroupParam && GroupParam.value!="") {
          //             that.tableData[i].groupid = GroupParam.value;
          //         }else{
          //             that.tableData[i].groupid = "--";
          //         }
          //     }
          // }
        }
        this.total = response.total;
      });
    },
    refreshlampdata() {
      let queryParams = {
        pageNum: this.currentPage,
        pageSize: this.perpage,
        productId: this.productId,
        deviceName: this.search,
        serialNumber: this.search2,
        showChild: true,
      };
      this.getDeviceList(queryParams);
    },
    checkDetail(row) {
      this.lampmsg = row;
      if (row.longitude == 0 || row.latitude == 0) {
        this.$message({
          type: "error",
          message: this.$t("table.roadlampsystem_background_table_Incorrect"),
        });
      } else {
        this.$emit("lampmsg", this.lampmsg);
      }
    },
    lampmaxtoparent() {
      this.msg = "lampmaxshow";
      this.$emit("lampmaxshow", this.msg);
    },
    handleSizeChange(val) {
      this.perpage = val;
      this.refreshlampdata();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.refreshlampdata();
    },
    addClass({ row, column, rowIndex, columnIndex }) {
      var state, controlstate, alarmstate;

      if (row.status == 3) {
        //在线
        state = 1;
      } else {
        //离线
        state = 0;
      }

      if (row.controlstate == true) {
        //手动
        controlstate = 1;
      } else {
        //自动
        controlstate = 0;
      }

      if (row.controlstate == true) {
        //手动
        controlstate = 1;
      } else {
        //自动
        controlstate = 0;
      }

      if (row.status == 4 || row.status == 2) {
        //故障
        alarmstate = 1;
      } else if (row.status == 1) {
        //未激活
        alarmstate = 2;
      } else {
        //正常
        alarmstate = 0;
      }

      //  if (columnIndex === 6 && alarmstate == 1) {
      //故障
      //      return 'statealarmcss';
      //  } else if (columnIndex === 6 && alarmstate == 0) {
      //正常
      //       return 'stateonlinecss';
      //   }

      if (columnIndex === 6 && alarmstate == 1) {
        return "stateofflinecss";
      } else if (columnIndex === 6 && alarmstate == 0) {
        return "stateonlinecss";
      } else if (columnIndex === 6 && alarmstate == 2) {
        return "normallinecss";
      }
    },
    getMore(row) {
      this.row = row;
      if (
        row.alertCount != null &&
        row.alertCount != "" &&
        row.alertCount.unprocessedCount > 0
      ) {
        //故障
        this.$emit("alarminfo", this.row);
      } else {
        //正常
      }
    },
  },
};
</script>

<style scoped>
.lampdataform {
  display: flex;
  padding: 0px 10px;
  justify-content: space-around;
  height: 650px;
}
.modal_body{
    width: 840px;
    margin-left: 5px;
    background-color: #ffffff;
}
.el-button + .el-button {
  margin-left: 0px;
}
.el-button-amplify {
  height: 28px;
  margin-left: 10px;
  color: #c7c7c7;
}
.ant-form {
  display: flex;
  align-items: center;
}
.lamptable {
  top: 50px;
  border-radius: 5px;
}
.lamptable_export {
  margin: 0px 4px;
}
.modal_bottom {
  margin-left: 50px;
  margin-top: 5px;
}
.lamptable >>> .el-table {
  background-color: #fff;
}
.subtable >>> .el-table__body-wrapper {
  background-color: #fff;
}
.subtable >>> .el-table__row {
  background-color: white;
  color: #000000;
}
.lamptable >>> .el-table tbody tr:hover > td {
  background-color: #fff !important;
}
.lamptable >>> .el-table td {
  padding: 2px 0;
  font-size: 12px;
  border-bottom: 0.1px solid #dddddd;
}
.lamptable_export >>> .el-table td {
  padding: 2px 0;
  font-size: 10px;
  border-bottom: 0.1px solid #dddddd;
}
.lamptable >>> .el-table::before {
}
.lamptable >>> .el-table th.is-leaf {
  border-bottom: 0.1px solid #dddddd;
}
.subtable >>> .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #3586ff;
}
.subtable >>> .el-checkbox__inner::after {
  border: 2px solid #ffffff;
  border-left: 0px;
  border-top: 0px;
}
.modal_bottom >>> .el-input__inner {
  height: 24px;
  /* background-color: #edeef0;
  color: #636363; */
}
/* .modal_bottom >>> .el-pagination__total {
  color: #ffffff;
}
.modal_bottom >>> .el-pagination__jump {
  color: #ffffff;
}
.modal_bottom >>> .el-pagination.is-background .el-pager li {
  color: #636363;
  background-color: #fff;
}
.modal_bottom
  >>> .el-pagination.is-background
  .el-pager
  li:not(.disabled).active {
  background-color: #edeef0 !important;
}
.modal_bottom >>> .btn-prev {
  color: #636363;
  background-color: #fff;
}
.modal_bottom >>> .btn-next {
  color: #636363;
  background-color: #fff;
} */

.modal_bottom {
    display: flex;
    align-items: center;
    justify-content: center;
}
.subtable >>> .cell {
  padding-left: 8px;
  padding-right: 0px !important;
}
.modal_deviceadd {
  z-index: 202;
  left: 0px;
  height: 600px;
  width: 750px;
  position: absolute;
  top: 45%;
  margin-top: -260px;
  background: #3586ff;
  border-radius: 7px;
  box-shadow: 0 0 10px #888;
}
.modal_devicemanage {
  z-index: 202;
  left: 0px;
  height: 580px;
  width: 650px;
  position: absolute;
  top: 45%;
  margin-top: -260px;
  background: #3586ff;
  border-radius: 7px;
  box-shadow: 0 0 10px #888;
}
.topbar {
  display: flex;
  justify-content: space-between;
}
.modal_device_export {
  z-index: 2;
  position: absolute;
  height: 600px;
  width: 750px;
  top: 0px;
  left: 500px;
  background: #3586ff;
  border-radius: 7px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 1);
}
.closedbtn_export {
  float: right;
  margin-top: 8px;
  width: 24px;
  height: 24px;
  background: url("../../assets/image/close.png") no-repeat;
  cursor: pointer;
}
.modal_head_export {
  height: 30px;
  left: 0px;
  right: 0px;
  border-radius: 7px 7px 0 0;
  color: #ffffff;
  line-height: 30px;
  padding-left: 15px;
  font-size: 14px;
  cursor: move;
  text-align: left;
}
.export-btn {
  position: absolute;
  bottom: 8px;
  right: 10px;
}
.clear {
  clear: both;
}
.el-table >>> .statealarmcss {
  color: #c5221f;
}
.el-table >>> .stateonlinecss {
  color: #0d9c0e;
}
.el-table >>> .normallinecss {
  color: #ffba00;
}
.el-table >>> .stateofflinecss {
  color: #858585;
}
.lamptable >>> .el-table th.gutter {
  display: table-cell !important;
}
.topbar >>> .el-button-group {
}
.formatinfo {
  font-size: 12px;
}
.modal_device_export >>> .el-progress-bar {
  width: 85%;
}
.modal_device_export >>> .el-progress__text {
  color: #ffffff;
}
.inputHead {
  display: flex;
  align-items: center;
}
.inputHead >>> .el-input__inner {
  width: 180px;
}
.inputHead >>> .el-input__suffix {
  right: 20px;
}
.headText {
  font-size: 12px;
  width: 70px;
}
.inputBody {
  display: flex;
}
.menu-wrap {
  margin-top: -5px;
  height: 650px;
  overflow-x: auto;
  overflow-y: auto;
  padding-left: 0 !important;
  padding-bottom: 10px;
  width: 300px;
}
.menu-wrap .el-submenu__title {
  padding-left: 0 !important;
}
</style>
